<template>
    <div>
        <el-container>
            <el-aside width="200px">
                <AppMenu ref="appMenuRef" />
            </el-aside>
            <el-container style="min-width: 900px;">
                <el-header style="display: none;">
                    <AppHeader />
                </el-header>
                <el-main>
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import AppMenu from '@/components/menu'
import AppHeader from '@/components/header'
export default {
    components: {
        AppMenu,
        AppHeader
    },
    data() {
        return {

        }
    },
    methods: {

    },
    beforeRouteUpdate(to, from, next) {
        this.$refs.appMenuRef.defaultActive = to.path
        next()
    },
}
</script>

<style lang='scss' scoped>
::v-deep .el-header {
    background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
    height: 60px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

::v-deep .el-main {
    height: calc(100vh - 60px);
    overflow: auto;
}
</style>